<!-- @format -->

<template>
	<view class="popup-box">
		<view class="popup-head">
			<view class="cancel" @click="close"> 取消 </view>
			<view class="finish" @click="handerFinish">完成</view>
		</view>
		<view class="number-text-box">
			需选择 {{ travellerNum }} 位出行人,已选择 {{ selectedLengths }} 位
		</view>
		<view class="add-box" @click="$emit('handlerAdd')">
			<image
				style="width: 28rpx; height: 28rpx; margin-right: 8rpx"
				src="https://cdn1.visiotrip.com/h5AndMini/2023-3-29/order_add.png"></image>
			新增出行人
		</view>
		<view class="select-info-box-group">
			<view
				class="select-info-box"
				v-for="(item, index) in contactsLists"
				:key="index">
				<view class="select-info-left">
					<view
						class="icon-check"
						@click="onCheck(item)"
						:class="{ active: item.disabled == true }">
					</view>
					<view class="info-view">
						<text class="info-name">{{ item.contactName }} </text>
						<block v-if="item.contactsCertificate.length > 0">
							<block
								v-for="(certificate, index) in item.contactsCertificate"
								:key="index">
								<text class="info-text"
									>{{ certificate.certificateType }}
									<text class="info-body-text">{{
										viewValue(certificate)
									}}</text></text
								>
							</block>
						</block>
						<view v-else class="info-text red">
							<uni-icons type="info-filled" size="15" color="red"></uni-icons>
							请补充出行人的证件信息
						</view>
					</view>
				</view>
				<view
					class="icon-edit"
					@click="onEdit(item)"
					:class="{ active: item.disabled == true }">
				</view>
				<view class="line"></view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			tempSelect: [],
			isRefresh: true,
		}
	},
	props: {
		travellerNum: {
			type: Number,
			default: 0,
		},
		contactsList: {
			type: Array,
			default: [],
		},
		selectedItem: {
			type: Array,
			default: 0,
		},
		formData: {
			type: Array,
			default: [],
		},
	},
	computed: {
		contactsLists: {
			get() {
				return this.contactsList
			},
		},
		selectedLengths() {
			return this.tempSelect.length
		},
	},
	watch: {
		selectedItem() {
			this.tempSelect = this.selectedItem
		},
	},
	methods: {
		// 完成
		handerFinish() {
			this.$emit("handerFinish", this.tempSelect)
		},
		viewValue(contact) {
			let str = ""
			let filterArr = contact.contactsItemList.filter(
				(item) => item.templateId == "35"
			)
			if (filterArr.length > 0) {
				str = filterArr[0].templateInfoValue
			}
			return str
		},
		close() {
			this.isRefresh = false
			this.$nextTick(() => {
				this.isRefresh = true
			})
			this.$emit("close")
		},
		onCheck(item) {
			// let item = JSON.parse(JSON.stringify(itemValue))
			console.log('item',item)
			let selected = this.tempSelect.filter(
				(i) => i.contactId == item.contactId
			)
			if (selected.length == 0) {
				if (this.selectedLengths >= this.travellerNum) {
					uni.showToast({
						title: "您只要选择" + this.travellerNum + "出行人",
						icon: "none",
					})
					return
				}
				let items = JSON.parse(JSON.stringify(item))
				this.tempSelect.push(items)
			} else {
				this.tempSelect = this.tempSelect.filter(
					(i) => i.contactId != item.contactId
				)
			}
			item.disabled = !item.disabled
			// this.$emit('onCheck',item)
			this.$forceUpdate()
		},
		onEdit(itemObj) {
			let editFormData = JSON.parse(JSON.stringify(this.formData))
			let matchKey = null
			editFormData.forEach((element) => {
				element.contactId = itemObj.contactId
				itemObj.contactsItemList.forEach((item) => {
					if (element.customerInfoId == item.templateId) {
						element.inputValue = item.templateInfoValue
					}
				})
				itemObj.contactsCertificate.forEach((item, idx) => {
					let isMatch = false
					item.contactsItemList.forEach((_contact) => {
						if (element.customerInfoId == _contact.templateId) {
							// 证件类型 需要判定templateInfoCode && (element.valueType == _contact.templateInfoCode)
							if (
								element.customerInfoId == "41" &&
								element.customerInfo == _contact.templateInfoCode
							) {
								element.valueType = _contact.templateInfoValue
								element.inputValue = item.certificateType
								matchKey = idx
							} else if (
								element.customerInfoId !== "35" &&
								element.customerInfoId !== "41"
							) {
								element.inputValue = _contact.templateInfoValue
							}
						}
					})
					// 证件号码
					if (isMatch) {
						item.contactsItemList.forEach((_contact) => {
							if (element.customerInfoId == _contact.templateId) {
								// 证件号码 需要判定isMatch
								if (element.customerInfoId == "35") {
									element.inputValue = _contact.templateInfoValue
								}
							}
						})
					}
				})
				if (element.customerInfoId == "35") {
					element.inputValue = ""
				}
			})
			if (itemObj.contactsCertificate[matchKey]) {
				itemObj.contactsCertificate[matchKey].contactsItemList.forEach(
					(_contact) => {
						editFormData.forEach((element) => {
							if (element.customerInfoId == _contact.templateId) {
								// 证件号码 需要判定isMatch
								if (element.customerInfoId == "35") {
									element.inputValue = _contact.templateInfoValue
								}
							}
						})
					}
				)
			}
			this.$emit("edit", editFormData)
		},
	},
	mounted() {},
}
</script>
<style lang="scss" scoped>
/* 出行人选择 */
.select-info-box-group {
	width: 722rpx;
	height: 600rpx;
	overflow: scroll;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
}

.select-info-box {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;

	.line {
		position: absolute;
		bottom: 0;
		left: 50rpx;
		right: 0;
		height: 1px;
		color: #eeeeee;
	}
}

.select-info-box .select-info-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 50rpx;
}

.select-info-box .edit-img {
	width: 26rpx;
	height: 26rpx;
}

// .select-info-box image {
// 	width: 36rpx;
// 	height: 36rpx;
// }

.info-view {
	display: flex;
	flex-direction: column;
	margin-left: 20rpx;
}
.info-view .red {
	color: red !important;
}

.info-view .info-name {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #262626;
	margin-bottom: 13rpx;
}

.info-view .isSelf {
	display: inline-block;
	width: 56rpx;
	height: 36rpx;
	margin-left: 16rpx;
	line-height: 38rpx;
	text-align: center;
	background: #ffffff;
	border-radius: 4rpx 4rpx 4rpx 4rpx;
	opacity: 1;
	border: 1rpx solid #ffc9b4;
	width: 40px;
	font-size: 20rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #f75d1f;
}

.info-view .info-text {
	font-size: 24rpx;
	font-weight: 400;
	font-family: PingFang SC-Regular, PingFang SC;
	color: #919191;
}

.info-view .info-text .info-body-text {
	margin-left: 10rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #1a1a1a;
}

.icon-check {
	width: 44rpx;
	height: 44rpx;
	background: #ffffff;
	opacity: 1;
	border: 2rpx solid #707070;
	border-radius: 30rpx;
	margin-right: 22rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-check.active {
	width: 44rpx;
	height: 44rpx;
	background: url("https://cdn1.visiotrip.com/h5AndMini/2022-10-17/trip_selected_icon.png")
		0 0 no-repeat;
	background-size: 100%;
	border: none;
}

.icon-edit {
	align-self: flex-end;
	width: 42rpx;
	height: 42rpx;
	margin-right: 50rpx;
	background: url("https://cdn1.visiotrip.com/h5AndMini/edit-p@td2x.png") 0 0
		no-repeat;
	background-size: 100%;
}
.popup-box {
	padding: 0 14rpx;
	display: flex;
	flex-direction: column;
	background: #f7f7f6;
}

.popup-box .title-desc {
	font-size: 26rpx;
	color: #333333;
	margin-bottom: 10rpx;
}

.popup-head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* padding: 0  74rpx 0; */
}

.popup-head view {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 330rpx;
	height: 80rpx;
	border-radius: 40rpx;
}

.popup-head .cancel {
	width: 60px;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #777777;
}

.popup-head .finish {
	width: 60px;
	font-size: 32rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	float: right;
	text-align: right;
	color: #282828;
}
.number-text-box {
	height: 36rpx;
	font-size: 26rpx;
	font-family: PingFangSC-Regular-, PingFangSC-Regular;
	font-weight: normal;
	line-height: 32rpx;
	margin: 26rpx;
	color: #1a1a1a;
}

.number-text-box .text-number {
	color: #f75d1f;
}
.add-box {
	width: 722rpx;
	height: 88rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular-, PingFangSC-Regular;
	color: #1a1a1a;
}

.box-input {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.inputBox .input-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 26rpx;
	color: #646566;
	padding: 20rpx 0;
}

.inputBox .input-box .label {
	width: 6em;
	text-align: left;
}

.inputBox .input-box input {
	flex: 1;
}

.inputBox .input-box .phone-number {
	display: flex;
	align-items: center;
	color: #000;
	margin-right: 6rpx;
}

.inputBox .input-box .phone-number .more:before {
	content: "\e606";
	font-size: 12rpx;
	margin-left: 5rpx;
}

.and-placeholder-box {
	height: 500rpx;
}
</style>
